<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>GIS以房找人</title>


    <link rel="stylesheet" href="/static/webjars/layui/css/layui.css"  media="all">


    <script type="application/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cOtTydbKqZG2r1XaH49gtl34hKQ3VczY"></script>

    <style type="text/css">
        .anchorBL{
            display:none;
        }
    </style>
</head>
<body>

<div style="width: 100%; margin-top: 20px">
    <div class="layui-tab layui-tab-card" style="margin:0px;padding:0px;">
        <ul class="layui-tab-title">
            <li class="layui-this">房主信息</li>
            <li>住户信息</li>
            <li>房屋信息</li>
        </ul>
        <div class="layui-tab-content">
            <%------------------------------------房主信息部分------------------------------%>
            <div class="layui-tab-item layui-show" >
                <form class="layui-form" action="" style="margin-top: 20px;" lay-filter="houseowner">
                    <div class="layui-collapse" lay-filter="test">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">户主基本信息</h2>
                            <div class="layui-colla-content layui-show">
                                <table class="layui-table">
                                    <tr>
                                        <td width="150px">房主姓名</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="name"  placeholder="请输入房主姓名" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>性别</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="sex"  placeholder="房主性别" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>年龄</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="age"  placeholder="房主年龄" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>政治面貌</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="politicalOutlook"  placeholder="政治面貌" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>联系电话</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="tellphone"  placeholder="联系电话" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>身份证号</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="idCard"  placeholder="身份证号" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td >家庭住址</td>
                                        <td >
                                            <div class="layui-inline">
                                                <input type="text" name="livein"  placeholder="家庭住址" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        </td>
                                        <td>民族</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="nation"  placeholder="民族" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>就业状况</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="work"  placeholder="就业状况" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>工作行业</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="industry"  placeholder="工作行业" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>婚姻状况</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="marriage"  placeholder="婚姻状况" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>户口性质</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="nohRegister"  placeholder="户口性质" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>户籍所在地</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="hrResiter"  placeholder="户籍所在地" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>受教育程度</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="education"  placeholder="受教育程度" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>收入情况</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="income"  placeholder="收入情况" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>毕业学校</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="school"  placeholder="毕业学校" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>所学专业</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="major"  placeholder="所学专业" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>备注</td>
                                        <td colspan="3" >
                                            <input type="text" name="beizhu"  placeholder="所学专业" class="layui-input" disabled="">
                                        </td>

                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <%------------------------------------住户信息部分------------------------------%>
            <div class="layui-tab-item"  >
                <table class="layui-table" id="familyMenberInfo"></table>

            </div>
            <%------------------------------------房屋信息部分------------------------------%>
            <div class="layui-tab-item">
                <form class="layui-form" action="" style="margin-top: 20px;" lay-filter="Proprietor">
                    <div class="layui-collapse" lay-filter="test">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">业主信息</h2>
                            <div class="layui-colla-content layui-show">
                                <table class="layui-table">
                                    <tr>
                                        <td width="10%" >代表人/业主</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="name"  placeholder="请输入业主姓名" class="layui-input" disabled="">
                                            </div>
                                        </td >
                                        <td width="10%">业主联系电话</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="tellphone"  placeholder="请输入业主联系电话" class="layui-input" disabled="">
                                            </div>
                                        </td >
                                        <td width="10%">业主身份证号码</td>
                                        <td >
                                            <div class="layui-inline">
                                                <input type="text" name="idCard"  placeholder="业主身份证号码" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">房屋产权信息</h2>
                            <div class="layui-colla-content layui-show">
                                <table class="layui-table">
                                    <tr>
                                        <td width="10%">房屋编号</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="houseNum"  placeholder="请输入房屋编号" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">房产证号</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="cardNum"  placeholder="请输入房产证号" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">房屋凭证</td>
                                        <td>
                                            <div class="layui-input-inline">
                                                <input type="text" name="houseCoucher" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>房屋权证号</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="houseWarrant"  placeholder="请输入房屋产权证号" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>房屋权证发放时间</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text"  name="time" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>住房地址</td>
                                        <td >
                                            <div class="layui-inline-block">
                                                <input type="text" name="address"  placeholder="请输入地址" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">房屋信息</h2>
                            <div class="layui-colla-content layui-show">
                                <table class="layui-table">
                                    <tr>
                                        <td width="10%">建筑物名称</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="buildName"  placeholder="请输入建筑物名称" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">建成年份</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="buildTime"  placeholder="请输入建成年份" class="layui-input" disabled="">
                                            </div>
                                        </td>

                                        <td width="10%">建筑物用途</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="buildUse" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="10%">物管单位名称</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="tubeUnit" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">本户建筑面积</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="area"  autocomplete="off" placeholder="请输入建筑面积" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">房屋结构</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text"  name="structure"  class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td width="10%">房屋用途</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text"  name="houseUse"  class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">房屋来源</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text"  name="houseFrom"  class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td>房屋户型</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text"  name="huxing"  class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">土地信息</h2>
                            <div class="layui-colla-content layui-show">
                                <table class="layui-table">
                                    <tr>
                                        <td width="10%">土地取得方式</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text"  name="landGet"  class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">批准土地面积</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="langArea" placeholder="批准土地面积" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">实际使用土地面积</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="landUsearea" placeholder="请输入实际使用土地面积" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="10%">批准土地用途</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="landPurpose" placeholder="请输入土地用途" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">实际土地用途</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="landUsepurpose" placeholder="请输入实际土地用途" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">批准使用年限</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="landYear" placeholder="请输入使用年限" class="layui-input" disabled="">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="10%">土地证号</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="landNum" placeholder="请输入土地证号" class="layui-input" disabled>
                                            </div>
                                        </td>
                                        <td width="10%">土地凭证</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="landCoucher"  class="layui-input" disabled>
                                            </div>
                                        </td>
                                        <td width="10%">土地权证号</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input  type="text" name="landWarrant" class="layui-input" disabled>
                                            </div>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td width="10%">土地权证发证时间</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="landTime"   class="layui-input" disabled="">
                                            </div>
                                        </td>
                                        <td width="10%">产权人类型</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="landTopr" class="layui-input" disabled>
                                            </div>
                                        </td>
                                        <td width="10%">产权人姓名</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text" name="landUname"class="layui-input" disabled>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="10%">产权人证件类型</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="landIdtype"class="layui-input" disabled>
                                            </div>
                                        </td>
                                        <td width="10%">产权人证件号码</td>
                                        <td width="15%">
                                            <div class="layui-inline">
                                                <input type="text" name="landIdCard"  class="layui-input" disabled>
                                            </div>
                                        </td>
                                        <td width="10%">产权人联系电话</td>
                                        <td>
                                            <div class="layui-inline">
                                                <input type="text"  name="landTel"  placeholder="请输入产权人联系电话" class="layui-input" disabled>
                                            </div>
                                        </td>
                                    </tr>


                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>




<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail" href="/house/menberDetails?id={{d.id}}" target="_blank">详细</a>
    <%--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" href="#" >删除</a>--%>
</script>


<script type="application/javascript" src="/static/webjars/layui/layui.js"></script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element','table'], function(){
        var element = layui.element;
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;

        //----------------------------------房主信息部分
        $.ajax({ //jquery跳转传输数据
            type : "POST",
            url : "/ajax/house/userInfo/seachUserByHouseInfoId",//跳转的controller
            dataType : "json",//返回类型
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            data : {//传输controller的键值对
                "id" : GetRequest()
            },
            success : function(house) {//成功后执行并取值

                form.val('houseowner', {
                    "name": house.data.name  // "name": "value"
                    ,"idCard": house.data.idCard
                    ,"sex": house.data.sex
                    ,"age": house.data.age
                    ,"politicalOutlook": house.data.politicalOutlook
                    ,"tellphone": house.data.tellphone
                    ,"livein": house.data.livein
                    ,"nation": house.data.nation
                    ,"work": house.data.work
                    ,"industry": house.data.industry
                    ,"marriage": house.data.marriage
                    ,"nohRegister": house.data.nohRegister
                    ,"hrResiter": house.data.hrResiter
                    ,"education": house.data.education
                    ,"income": house.data.income+"元/月"
                    ,"school": house.data.school
                    ,"major": house.data.major
                    ,"beizhu": house.data.beizhu
                })


            },
            error : function(request) {//失败后执行
                layer.msg("数据加载失败");
            }
        });

        //----------------------------------住户信息部分
        table.render({
            elem: '#familyMenberInfo'
            ,url:'/ajax/house/userInfo/SeachfamilymenberinfoByHouseId'
            ,method: 'post'
            ,where: {
                id: GetRequest()
            }
            ,response: {
                statusName: 'res' //数据状态的字段名称，默认：code
                ,statusCode: 1 //成功的状态码，默认：0
                ,msgName: 'code' //状态信息的字段名称，默认：msg
                ,countName: 'count' //数据总数的字段名称，默认：count
                ,dataName: 'data' //数据列表的字段名称，默认：data
            }
            ,cols: [[ //表头
                {field: 'id' , title:'ID'}
                ,{field:'name', title: '姓名'}
                ,{field:'sex',  title: '性别'}
                ,{field:'idCard', width:160, title: '身份证号'}
                ,{field:'nation',  title: '民族'}
                ,{field:'politicalOutlook',  title: '政治面貌'}
                ,{field:'hrResiter',width:160,  title: '户籍地'}
                ,{field:'tellphone' ,width:130,title: '联系电话'}
                ,{field:'work',title: '就业状态'}
                ,{field:'industry',width:150,title: '工作行业'}
                ,{title:'操作',width:100,fixed: 'right', toolbar: '#barDemo'}
            ]]

        });


        //监听工具条
        table.on('tool(Household)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                //可以在这里跳转到处理器处理后返回页面
                // layer.msg('ID：'+ data.id + ' 的查看操作');
                // layer.open({
                //     type: 2,
                //     title: '居民详细信息',
                //     btn: ['确定', '取消'],
                //     btnAlign: 'c',
                //     maxmin: true,
                //     shadeClose: true, //点击遮罩关闭层
                //     area: ['50%', '60%'],
                //     content: '/house/inhabitantDetails',
                //     btn1: function (index, layero) {
                //
                //     }
                // });
            }
        });





        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //----------------------------------房屋信息部分
        $.ajax({ //jquery跳转传输数据
            type : "POST",
            url : "/ajax/searchHouseInfo/searchHouseDetail",//跳转的controller
            dataType : "json",//返回类型
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            data : {//传输controller的键值对
                "id" : GetRequest()
            },
            success : function(house) {//成功后执行并取值

                form.val('Proprietor', {
                    "name": house.data.name  // "name": "value"
                    ,"idCard": house.data.idCard
                    ,"houseNum": house.data.houseNum
                    ,"cardNum": house.data.cardNum
                    ,"houseWarrant": house.data.houseWarrant
                    ,"address": house.data.province+house.data.city+house.data.county+house.data.town+house.data.village+house.data.address
                    ,"buildName": house.data.buildName
                    ,"buildTime": house.data.buildTime
                    ,"buildUse": house.data.buildUse
                    ,"tubeUnit": house.data.tubeUnit
                    ,"area": house.data.area+"㎡"
                    ,"structure": house.data.structure
                    ,"houseUse": house.data.houseUse
                    ,"houseFrom": house.data.houseFrom
                    ,"huxing": house.data.huxing
                    ,"landGet": house.data.landGet
                    ,"langArea": house.data.langArea+"㎡"
                    ,"landUsearea": house.data.landUsearea+"㎡"
                    ,"landPurpose": house.data.landPurpose
                    ,"landUsepurpose": house.data.landUsepurpose
                    ,"landYear": house.data.landYear
                    ,"landNum": house.data.landNum
                    ,"landCoucher": house.data.landCoucher
                    ,"landWarrant": house.data.landWarrant
                    ,"landTime": house.data.landTime
                    ,"landTopr": house.data.landTopr
                    ,"landUname": house.data.landUname
                    ,"landIdtype": house.data.landIdtype
                    ,"landIdCard": house.data.landIdCard
                    ,"tellphone": house.data.tellphone
                    ,"landTel": house.data.landTel
                    ,"houseCoucher": house.data.houseCoucher
                    ,"time": house.data.time
                })


            },
            error : function(request) {//失败后执行
                layer.msg("数据加载失败");
            }
        });
        //----------------------------------其他类别

        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            if (url.indexOf("?") != -1) {    //判断是否有参数
                var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
                strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
                return strs[1];          //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
            }
        }

    });
</script>


</body>
</html>